<template>
  <div class="containter">
    <div class="box" v-if="isshow">
      <el-card class="card" v-for="(item, index) in data" :key="index" @click="goclick(index)" shadow="hover">
        <div class="smbox">
          <div class="top">
            <img :src="item.imglist[0]" />
          </div>
          <span class="bottom">
            <div style="display: flex;">
              <div class="location">{{ item.location }}</div>
              <div class="city">{{ item.city }}</div>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="description"> {{ item.description }}</div>
          </span>
        </div>
      </el-card>
      <el-pagination :page-size="pagesize" background layout="prev, pager, next,total" :total="usehotStore?.hotdata.length"
        style="margin-left: 40%; padding-top: 30px; padding-bottom: 30px" @current-change="handleCurrentChange"
        v-model:current-page="currentPage1" />
    </div>
    <div v-else class="hot">
      <div class="inbox">
        <el-button type="success" plain @click="goback" style="margin: 20px">返回推荐列表</el-button>
        <div style="text-align: center; font-size: 20px; font-weight: 800">
          {{ nowitem.location }}
        </div>

        <div>
          <div class="newcontent" v-html="nowitem.content"></div>
        </div>
        <el-carousel :interval="4000" type="card" height="200px" style="margin-left: 100px; margin-top: 80px">
          <el-carousel-item v-for="item in nowitem.imglist" :key="item">
            <img :src="item" style="width: 200px; height: 200px" />
          </el-carousel-item>
        </el-carousel>
        <div style="
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
            padding-bottom: 50px;
          ">
          <el-button type="primary" @click="before" :disabled="!nowindex">上一篇</el-button>
          <el-button type="primary" @click="next" :disabled="nowindex == usehotStore.hotdata.length - 1">下一篇</el-button>
        </div>

        <el-backtop :right="100" :bottom="100" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { gethotdata } from '@/api/hot/index'
import { hotStore } from '@/stores/hot'
import type {hotObject,hotRespnseData} from '@/api/hot/type'   //引入数据类型
const usehotStore = hotStore()

let nowindex = ref(0)
let nowitem = ref()
let isshow = ref(true)

const showHtml = (str: string) => {
  if (str.indexOf('\\t') !== -1) {
    //console.log('String contains a tab character.')
  }

  return str.replace(/\\t/g, '\u3000\u3000').replace(/\\\t/g, '\u3000\u3000')
}

const goback = () => {
  isshow.value = true
}
const goclick = (index: number) => {
  nowindex.value = index
  nowitem.value = data.value[nowindex.value]
  nowitem.value.content = showHtml(nowitem.value.content)
  isshow.value = false
}
const before = () => {
  nowindex.value--
  nowitem.value = usehotStore.hotdata[nowindex.value]
  document.documentElement.scrollTop = 0
}

const next = () => {
  nowindex.value++
  nowitem.value = usehotStore.hotdata[nowindex.value]
  document.documentElement.scrollTop = 0
}

onMounted(() => {
  initdata()
})

let data = ref<hotObject[]>([])
let pagesize=ref(4)
const currentPage1 = ref(1)
const initdata = async () => {
  let result:hotRespnseData = await gethotdata()

  // 假设 arr 是你要遍历的数组
  for (let i = 0; i < result.data.length; i++) {
    // 在循环中对数组中的元素进行操作
    result.data[i].imglist = JSON.parse(result.data[i].imglist)
    let description = result.data[i].content
    description = description
      .replace(/(\n)/g, '')
      .replace(/(\t)/g, '')
      .replace(/(\r)/g, '')
      .replace(/<\/?[^>]*>/g, '')
      .replace(/\s*/g, '')
    result.data[i].description = description
  }

  data.value = result.data.slice(
    (currentPage1.value - 1) * pagesize.value,
    (currentPage1.value - 1) * pagesize.value + pagesize.value
  )
  usehotStore.modifyhotdata(result.data)
}

const handleCurrentChange = () => {
  data.value = usehotStore?.hotdata.slice(
    (currentPage1.value - 1) * pagesize.value,
    (currentPage1.value - 1) * pagesize.value + pagesize.value
  )
}
</script>

<style scoped>
.containter {
  width: 100%;
  height: 100vh;

  /* background-color: #eee; */
  .box {
    padding-top: 100px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    width: 100%;
    height: 100%;

    .card {
      width: 28%;
      display: flex;
      justify-content: center;
      margin-bottom: 50px;
      margin-left: 17%;
    margin-right: -8%;
    border-radius: 10px;
      .smbox {
        width: 400px;
        background-color: white;
        border-radius: 10px;

        .top {
          text-align: center;
          img {
            width: 90%;
            height: 100%;
            border-radius: 10px;
            margin: 10px;
          }
        }

        .bottom {
          margin-top: 10px;

          .location {
            font-size: 26px;
            font-weight: 800;
            margin-left: 10px;
          }

          .city {
            font-weight: normal;
            margin-top: 5px;
            margin-left: 80px;
            font-size: 20px;
          }

          .title {
            margin-top: 25px;
            font-size: 15px;
            margin-left: 10px;
            width: 80%;
            color: rgb(144,195,202);
            font-weight: 800;
            line-height: 1.5;
          }

          .description {
            margin: 20px 10px;
            padding-right: 10px;
            color: #666;
            font-size: 14px;
            width: 100%;
            height: 60px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* 指定显示的行数 */
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            line-height: 1.5;
          }
        }
      }

    }
  }

  .hot {
    margin-top: 100px;
    display: flex;
    justify-content: center;

    .inbox {
      width: 70%;
      background-color: white;
    }

    .newcontent {
      width: 100%;
      padding-left: 50px;
      margin-top: 50px;
    }

    .newcontent>>>p {
      font-weight: 100;
    }
  }
}
</style>
